<template>
  <view class="detail-container">
    <!-- 消息内容卡片 -->
    <view class="message-card">
      <view class="message-title">{{ message.title }}</view>
      <view class="message-meta">
        <text>发布人: {{ message.publisher }}</text>
        <text>{{ formatTime(message.publish_time) }}</text>
      </view>
      <view class="message-type" :class="'type-' + message.notice_type_id">
        {{ getTypeName(message.notice_type_id) }}
      </view>
      <view class="message-content">{{ message.content }}</view>
    </view>
    
    <!-- 相关附件 如果有的话 -->
    <view class="attachment-section" v-if="message.file_url">
      <view class="section-title">相关附件</view>
      <view class="attachment-item" @click="openInBrowser(message.file_url)">
        <image src="/static/icons/file.png" class="file-icon"></image>
        <view class="file-name">{{ message.filename || '查看附件' }}</view>
        <view class="download-icon">查看</view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/util/request.js'

export default {
  data() {
    return {
      id: null,
      message: {},
      noticeTypes: [
        {id: 1, type: '活动通知'},
        {id: 2, type: '新闻通知'},
        {id: 3, type: '紧急通知'},
        {id: 4, type: '维修通知'},
        {id: 5, type: '缴费通知'}
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.getMessageDetail();
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  methods: {
    // 获取消息详情
    async getMessageDetail() {
      try {
        const res = await request({
          url: `notice-server/notice/detail/${this.id}`,
          method: 'GET'
        });
        
        if (res.code === 200) {
          // 转换字段名称
          this.message = {
            id: res.data.id,
            title: res.data.title,
            content: res.data.content,
            notice_type_id: res.data.noticeTypeId || res.data.notice_type_id,
            publisher: res.data.publisher,
            publish_time: res.data.publishTime || res.data.publish_time,
            status: res.data.status,
            filename: res.data.filename,
            file_url: res.data.fileUrl || res.data.file_url
          };
          
          // 设置页面标题
          uni.setNavigationBarTitle({
            title: this.getTypeName(this.message.notice_type_id)
          });
        } else {
          throw new Error('获取消息详情失败');
        }
      } catch (error) {
        console.error('获取消息详情出错:', error);
        uni.showToast({
          title: '网络错误，请稍后再试',
          icon: 'none'
        });
        
        // 模拟数据，实际开发中应该删除
        this.message = {
          id: this.id,
          title: '小区活动通知',
          content: '本周六将举行小区居民联谊活动，欢迎大家参加！活动地点在小区中心广场，时间为上午10点至下午3点。活动内容包括才艺表演、趣味游戏、抽奖等环节，还准备了丰富的茶点和礼品。希望大家踊跃参与，共同营造和谐友爱的社区氛围。如有特殊情况无法参加，请提前告知物业。',
          notice_type_id: 1,
          publisher: 'admin',
          publish_time: '2023-10-15 10:00:00',
          status: 1,
          filename: '活动详情.pdf',
          file_url: 'https://example.com/files/activity.pdf'
        };
        
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: this.getTypeName(this.message.notice_type_id)
        });
      }
    },
    
    // 获取消息类型名称
    getTypeName(typeId) {
      const type = this.noticeTypes.find(item => item.id === typeId);
      return type ? type.type : '通知';
    },
        
    // 直接使用系统浏览器打开附件
    openInBrowser(url) {
      if (!url) return;
      
      uni.showLoading({
        title: '正在打开浏览器...'
      });
      
      // 确保URL格式正确
      if (!url.startsWith('http')) {
        url = 'http://' + url;
      }
      
      setTimeout(() => {
        uni.hideLoading();
        
        // 判断平台环境
        // #ifdef APP-PLUS
        plus.runtime.openURL(url, (err) => {
          if (err) {
            console.error('打开浏览器失败:', err);
            uni.showToast({
              title: '无法打开浏览器',
              icon: 'none'
            });
            
            // 备用方案：使用WebView
            this.openWithWebView(url);
          }
        });
        // #endif
        
        // #ifdef H5
        try {
          window.open(url, '_system');
        } catch (error) {
          console.error('打开URL失败:', error);
          // 备用方案：使用WebView
          this.openWithWebView(url);
        }
        // #endif
        
        // #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-QQ || MP-BAIDU
        // 小程序环境下使用内置webview
        this.openWithWebView(url);
        // #endif
      }, 500);
    },
    
    // 备用方案：使用WebView
    openWithWebView(url) {
      uni.showModal({
        title: '提示',
        content: '是否使用应用内浏览器查看文档？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: `/pages/webview/index?url=${encodeURIComponent(url)}`
            });
          }
        }
      });
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '';
      
      const date = new Date(timeStr);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    }
  }
}
</script>

<style scoped>
.detail-container {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding: 30rpx;
}

.message-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.message-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.message-type {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
}

.type-1 {
  background-color: #e6f7ff;
  color: #1890ff;
}

.type-2 {
  background-color: #f0f5ff;
  color: #597ef7;
}

.type-3 {
  background-color: #fff2e8;
  color: #fa8c16;
}

.type-4 {
  background-color: #f6ffed;
  color: #52c41a;
}

.type-5 {
  background-color: #fff0f6;
  color: #eb2f96;
}

.message-content {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
}

.attachment-section {
  margin-top: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.section-title:before {
  content: '';
  display: inline-block;
  width: 8rpx;
  height: 30rpx;
  background-color: #1a7cf7;
  margin-right: 16rpx;
  border-radius: 4rpx;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.file-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.file-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.download-icon {
  font-size: 26rpx;
  color: #1a7cf7;
  background-color: #f0f7ff;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
}
</style>



